<template>
	<div class="vote-wrap">
		<div class="vote-inner-wrap">
			<div class="vote-title-wrap" v-if="voteobj.title">
				{{voteobj.title}}
			</div>
			<div class="vote-bg-wrap" v-if="voteobj.img">
				<img :src="`${roompara.show_url}${voteobj.img}`" alt="投票" class="vote-bg-img">
			</div>
			<div class="vote-content-wrap" v-if="voteobj.content">
				{{voteobj.content}}
			</div>
			<div class="vote-list-wrap" v-if="voteobj.options.length">
				<ul class="vote-ul">
					<li class="vote-li" v-for="item in voteobj.options" :key="item.id">
						<div class="vote-info-left fl">
							<div class="vote-avatar-wrap">
								<img :src="`${roompara.show_url}${item.img}`" alt="投票人">
							</div>
							<div class="vote-number-wrap">
								<p>已投票</p>
								<p>{{item.s_num}}</p>
							</div>
						</div>
						<div class="vote-info-right">
							<div class="vote-desc">
								{{item.content}}
							</div>
							<div class="vote-input-wrap">
								<template v-if="voteobj.type === 1">
									<input type="checkbox" :id="`checkbox-${item.id}`" class="vote-checkbox clip" :value="item.id" v-model="options" v-if="!item.hasVoted && !item.fakeVoted">
									<label :for="`checkbox-${item.id}`" class="vote-label vote-checkbox-label" :class="{'has-voted': item.hasVoted}"></label>
								</template>
								<template v-else>
									<input type="radio" name="vote-radio" :id="`checkbox-${item.id}`" class="vote-radio clip" :value="item.id" v-model="votePicked" v-if="!item.hasVoted && !item.fakeVoted">
									<label :for="`checkbox-${item.id}`" class="vote-label vote-radio-label" :class="{'has-voted': item.hasVoted}"></label>
								</template>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="vote-btn-wrap">
				<button class="vote-btn" @click="handleVote" v-if="!hasVoted">投票</button>
				<button class="vote-btn" :class="{'disabled': hasVoted}" v-else>已投票</button>
			</div>
		</div>
	</div>
</template>

<script>
	import { handleVote } from '@/api/room'
	import { mapGetters } from 'vuex'
	import { ls } from '@/utils'
	export default {
		name: 'VoteCom',
		props: {
			voteObj: {
				type: Object,
				default: () => {}
			},
			initData: {
				type: Object,
				default: () => {}
			}
		},
		computed:{
			...mapGetters([
			  'user',
				'roompara'
			]),
			voteobj() {
				const key = `${this.initData.room_id}_${this.user.uid}_${this.voteObj.uuid}`
				const val = ls.get(key)
				if(val) {
					this.hasVoted = val['hasVoted']
					const options = val['options']
					if(options){
						this.voteObj['options'] = this.voteObj['options'].map((item, index) => {
							if(options.includes(item.id)){
								item.hasVoted = true
							}else{
								item.fakeVoted = true
							}
							return item
						})
					}
				}
				return this.voteObj
			}
		},
		data() {
			return {
				options: [],
				votePicked: '',
				hasVoted: null
			}
		},
		methods: {
			handleVote() {
				if(!this.user.logined) {
				  this.$router.push('/login')
				  return false
				}
				const param = {
					room_id: this.initData.room_id,
					room_password: this.initData.room_password,
					options: this.options,
					device_id: 1
				}
				if(this.voteObj.type !== 1) {
					param.options = [this.votePicked]
				}
				if(param.options.length === 0){
					this.$layer.open({
					  content: '请至少选择一项,进行投票哦',
					  skin: 'msg',
					  time: 2 // 2秒后自动关闭
					})
					return
				}
				handleVote(param).then(res => {
					if(res.code === 0){
						this.voteobj.options.forEach((item, index) => {
							if(param.options.includes(item.id)) {
								item.s_num += 1
								item.hasVoted = true
							}else{
								item.fakeVoted = true
							}
						})
						this.$layer.open({
						  content: res.message,
						  skin: 'msg',
						  time: 2 // 2秒后自动关闭
						})
						const key = `${this.initData.room_id}_${this.user.uid}_${this.voteObj.uuid}`
						//第二天自动清除
						const expires = new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1).getTime()
						ls.set(key, { hasVoted: true, options: param.options }, expires)
						this.hasVoted = true
					}
				}).catch(err => {
					if(err.message.includes('投过票了')) {
						const key = `${this.initData.room_id}_${this.user.uid}_${this.voteObj.uuid}`
						//第二天自动清除
						const expires = new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1).getTime()
						ls.set(key, { hasVoted: true }, expires)
						this.hasVoted = true
					}
					console.log(err)
				})
			}
		},
		created() {
			console.log('created')
		}
	}
</script>

<style lang='scss' scoped>
	.vote-wrap{
		font-size: 0.875rem;
		color: #333;
		.vote-title-wrap{
			font-size: 1rem;
			color: #333;
			font-weight: 700;
			text-align: center;
		}
		.vote-bg-wrap{
			margin: 5px 0;
			text-align: center;
			.vote-bg-img{
				max-width: 100%;
				height: auto;
				vertical-align: top;
			}
		}
		.vote-avatar-wrap{
			width: 5.625rem;
			height: 5.625rem;
			overflow: hidden;
			img{
				display: block;
				width: 100%;
				height: 100%;
			}
		}
		.vote-li{
			margin-bottom: 0.75rem;
			overflow: hidden;
		}
		.vote-number-wrap{
			margin-top: 0.375rem;
			text-align: center;
			color: #516BF1;
		}
		.vote-list-wrap{
			margin-top: 0.75rem;
		}
		.vote-info-left{
			margin-right: 0.875rem;
		}
		.vote-info-right{
			overflow: hidden;
			.vote-desc{
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 4;
				height: 5.5rem;
				line-height: 1.375rem;
				overflow: hidden;
				
			}
		}
		.vote-input-wrap{
			position: relative;
			height: 1.875rem;
			.vote-label{
				position: absolute;
				right: 5px;
				bottom: 0;
				width: 1rem;
				height: 1rem;
				border: 2px solid #516BF1;
				&.vote-radio-label{
					border-radius: 50%;
				}
			}
		}
		.vote-checkbox:checked + label,.vote-radio:checked + label,label.has-voted{
			background: url(../../assets/images/icon-checkbox-gou.png) no-repeat center;
			background-color: #516BF1;
			background-size: contain;
		}
		.vote-btn-wrap{
			margin-bottom: 1.25rem;
			text-align: center;
			.vote-btn{
				display: inline-block;
				width: 4.5rem;
				height: 1.625rem;
				-webkit-appearance: none;
				outline: 0 none;
				border: 0 none;
				box-sizing: border-box;
				text-align: center;
				background-color: #516BF1;
				color: #fff;
				border-radius: 0.8125rem;
				&.disabled{
					background-color: #aaa;
					pointer-events: none;
				}
			}
		}
	}
</style>
